Je možné přepnout viditelnost prvku pomocí funkcí .hide (), .show () nebo .toggle ()?
Jak byste otestovali, zda je prvek viditelný nebo skrytý?
2020-12-07 21:51:27
1
2
další
Vzhledem k tomu, že otázka odkazuje na jeden prvek, může být tento kód vhodnější:
// Zkontroluje obsah CSS pro zobrazení: [žádný | blok], ignoruje viditelnost: [true | false]
$ (element) .is (": visible");
// Totéž funguje se skrytým
$ (element) .is (": hidden");
Je to stejné jako twerntův návrh, ale aplikuje se na jeden prvek; a odpovídá algoritmu doporučenému v jQuery FAQ.
Ke kontrole vybraného prvku pomocí jiného prvku, selektoru nebo jiného objektu jQuery používáme jQuery's is (). Tato metoda prochází podél prvků DOM a hledá shodu, která splňuje předaný parametr. Vrátí true, pokud existuje shoda, jinak vrátí false.
|
Můžete použít skrytý selektor:
// Odpovídá všem prvkům, které jsou skryté
$ ('element: hidden')
A viditelný selektor:
// Odpovídá všem viditelným prvkům
$ ('element: visible')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("visibility") == "skrytý") {
// 'prvek' je skrytý
}
Výše uvedená metoda nezohledňuje viditelnost rodiče. Chcete-li vzít v úvahu také rodiče, měli byste použít .is (": hidden") nebo .is (": visible").
Například,
Div2
Výše uvedená metoda bude považovat div2 za viditelný, zatímco: visible ne. Ale výše uvedené může být užitečné v mnoha případech, zvláště když potřebujete zjistit, zda jsou ve skrytém nadřazeném prvku viditelné nějaké chyby divs, protože za takových podmínek: visible nebude fungovat.
|
Žádná z těchto odpovědí neřeší to, co chápu jako otázku, což je to, co jsem hledal: „Jak zacházím s položkami, které mají viditelnost: skryté?“. Ani: visible, ani: hidden to nezvládne, protože oba hledají zobrazení podle dokumentace. Pokud jsem mohl určit, neexistuje selektor pro zpracování viditelnosti CSS. Zde je způsob, jakým jsem to vyřešil (standardní selektory jQuery, může existovat zkrácenější syntaxe):
$ (". item"). each (function () {
if ($ (this) .css ("visibility") == "skrytý") {
// zpracovat neviditelný stav
} else {
// zpracovat viditelný stav
}
});
|
Z Jak zjistím stav přepnutého prvku?
To, zda je prvek sbalen, můžete určit pomocí selektorů: visible a: hidden.
var isVisible = $ ('# myDiv'). je (': viditelný');
var isHidden = $ ('# myDiv'). is (': hidden');
Pokud jednoduše jednáte o prvek na základě jeho viditelnosti, můžete do selektorového výrazu zahrnout pouze: viditelný nebo: skrytý. Například:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Když často kontrolujete, zda je něco viditelné nebo ne, budete okamžitě pokračovat a uděláte s tím něco jiného. jQuery řetězení to usnadňuje.
Takže pokud máte selektor a chcete s ním provést nějakou akci, pouze pokud je viditelný nebo skrytý, můžete použít filtr (": visible") nebo filter (": hidden") a následně jej zřetězit s akcí, kterou chcete vzít.
Takže místo příkazu if takto:
if ($ ('# btnUpdate'). je (": viditelný"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Tlačítko Skrýt
}
Nebo efektivnější, ale ještě ošklivější:
var tlačítko = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({width: "toggle"}); // Tlačítko Skrýt
}
Vše můžete udělat v jednom řádku:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
: Viditelný selektor podle dokumentace jQuery:
Mají zobrazenou hodnotu CSS žádnou.
Jsou to prvky formuláře s type = "hidden".
Jejich šířka a výška jsou explicitně nastaveny na 0.
Prvek předka je skrytý, takže se prvek na stránce nezobrazí.
Prvky s viditelností: skryté nebo krytí: 0 jsou považovány za viditelné, protože stále zabírají místo v rozložení.
To je v některých případech užitečné a v jiných zase zbytečné, protože pokud chcete zkontrolovat, zda je prvek viditelný (display! = None) a ignorujete viditelnost rodičů, zjistíte, že děláte .css ("display") == 'none „je nejen rychlejší, ale také vrátí kontrolu viditelnosti správně.
Pokud chcete zkontrolovat viditelnost místo zobrazení, měli byste použít: .css ("visibility") == "skrytý".
Vezměte v úvahu také další poznámky jQuery:
Protože: visible je rozšíření jQuery a není součástí specifikace CSS, dotazy využívající: visible nemohou využívat zvýšení výkonu poskytované nativní metodou DOM querySelectorAll (). Chcete-li dosáhnout nejlepšího výkonu při použití prvků: visible to select, nejprve vyberte prvky pomocí čistého selektoru CSS a poté použijte .filter (": visible").
Pokud máte obavy o výkon, měli byste zkontrolovat Nyní mě vidíte… zobrazit / skrýt výkon (2010-05-04). A k zobrazení a skrytí prvků použijte jiné metody.
|
To funguje pro mě, a já používám show () a hide (), aby se můj div skrytý / viditelný:
if ($ (this) .css ('display') == 'none') {
/ * váš kód jde sem * /
} else {
/ * alternativní logika * /
}
|
Jak funguje viditelnost prvku a jQuery;
Prvek lze skrýt s displejem: žádný,viditelnost: skrytá nebo neprůhlednost: 0. Rozdíl mezi těmito metodami:
display: none skryje prvek a nezabírá žádné místo;
viditelnost: skrytý skryje prvek, ale přesto v rozložení zabírá místo;
krytí: 0 skryje prvek jako „viditelnost: skrytý“ a stále zabírá místo v rozložení; jediný rozdíl je v tom, že opacita umožňuje člověku učinit prvek částečně průhledným;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} else {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} else {
$ ('. target'). show ();
}
if ($ ('. target-visibility'). css ('visibility') == 'skrytý') {
$ ('. target-visibility'). css ({
viditelnost: "viditelný",
Zobrazit: ""
});
} else {
$ ('. target-visibility'). css ({
viditelnost: "skrytý",
Zobrazit: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
neprůhlednost: "1",
Zobrazit: ""
});
} else {
$ ('. target-visibility'). css ({
neprůhlednost: "0",
Zobrazit: ""
});
}
Užitečné metody přepínání jQuery:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Můžete to udělat také pomocí běžného JavaScriptu:
funkce isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
návrat true;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["viditelnost"]! = "skrytý") {
návrat isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("viditelnost")! = "skrytý") {
návrat isRendered (domObj.parentNode);
}
}
návrat false;
}
Poznámky:
Funguje všude
Funguje pro vnořené prvky
Funguje pro CSS a vložené styly
Nevyžaduje rámec
|
Použil bych třídu CSS .hide {display: none! Important; }.
Pro skrytí / zobrazení volám .addClass ("skrýt") /. RemoveClass ("skrýt"). Pro kontrolu viditelnosti používám .hasClass ("skrýt").
Je to jednoduchý a jasný způsob, jak zkontrolovat / skrýt / zobrazit prvky, pokud neplánujete používat metody .toggle () nebo .animate ().
|
Demo Link
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('slow', function () {
// Animace dokončena.
alert ($ ('# book'). is (": visible")); // <--- TRUE, pokud je viditelný False, pokud je skrytý
});
});
Klikněte zde
Zdroj:
Blogger Plug n Play - Nástroje a widgety jQuery: Jak zjistit, zda je prvek skrytý nebo viditelný pomocí jQuery
|
Lze jednoduše použít skrytý nebo viditelný atribut, například:
$ ('element: hidden')
$ ('element: visible')
Nebo můžete zjednodušit totéž pomocí následujícího.
$ (element) .is (": visible")
|
ebdiv by měl být nastaven na style = "display: none;". Funguje to jak pro zobrazení, tak pro skrytí:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Další odpověď, kterou byste měli vzít v úvahu, je, pokud skrýváte prvek, měli byste použít jQuery, ale místo toho, abyste jej skutečně skryli, odstraníte celý prvek, ale zkopírujete jeho obsah HTML a samotnou značku do proměnné jQuery a vše, co musíte udělat, je otestovat, zda je taková značka na obrazovce, pomocí normální if (! $ ('# thetagname'). length).
|
Při testování prvku proti: skrytému selektoru v jQuery je třeba vzít v úvahu, že absolutně umístěný prvek může být rozpoznán jako skrytý, i když jsou viditelné jeho podřízené prvky.
Na prvním místě se to zdá poněkud protiintuitivní - ačkoli bližší pohled na dokumentaci jQuery poskytuje relevantní informace:
Prvky lze považovat za skryté z několika důvodů: [...] Jejich šířka a výška jsou výslovně nastaveny na 0. [...]
Takže to vlastně dává smysl, pokud jde o krabicový model a vypočítaný styl prvku. I když šířka a výška nejsou nastaveny explicitně na 0, mohou být nastaveny implicitně.
Podívejte se na následující příklad:
console.log ($ ('. foo'). is (': hidden')); // skutečný
console.log ($ ('. bar'). is (': hidden')); // Nepravdivé
.foo {
pozice: absolutní;
vlevo: 10px;
nahoře: 10px;
pozadí: # ff0000;
}
.bar {
pozice: absolutní;
vlevo: 10px;
nahoře: 10px;
šířka: 20px;
výška: 20px;
pozadí: # 0000ff;
}
Aktualizace pro jQuery 3.x:
S jQuery 3 se popsané chování změní! Prvky budou považovány za viditelné, pokud mají pole rozvržení, včetně polí s nulovou šířkou a / nebo výškou.
JSFiddle s jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Stejný kód JavaScript pak bude mít tento výstup:
console.log ($ ('. foo'). is (': hidden')); // Nepravdivé
console.log ($ ('. bar'). is (': hidden'));// Nepravdivé
|
To může fungovat:
expect ($ ("# message_div"). css ("display")). toBe ("none");
|
Příklad:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). délka) {
console.log ('Skryté');
}
});
Kategorie: Fish
Produkt: Lososový Atlantik
Specie: Salmo salar
Forma: Steaky
|
Chcete-li zkontrolovat, zda to není viditelné, používám!:
if (! $ ('# book'). is (': visible')) {
upozornění („# kniha není viditelná“)
}
Nebo následující je také sam, uložení selektoru jQuery do proměnné, aby měl lepší výkon, když to potřebujete vícekrát:
var $ book = $ ('# kniha')
if (! $ book.is (': visible')) {
upozornění („# kniha není viditelná“)
}
|
Použijte přepínání tříd, nikoli úpravy stylů. . .
Používání tříd určených pro „skrývání“ prvků je snadné a také jednou z nejúčinnějších metod. Přepnutí třídy „skrytá“ se stylem zobrazení „žádný“ bude rychlejší než přímá úprava tohoto stylu. Vysvětlil jsem některé z toho docela důkladně v otázce přetečení zásobníku Otočení dvou prvků viditelných / skrytých ve stejné div.
Osvědčené postupy a optimalizace JavaScriptu
Zde je opravdu poučné video z Google Tech Talk od front-end inženýra Google Nicholase Zakase:
Zrychlete svůj Javascript (YouTube)
|
Je aktivován příklad použití viditelné kontroly pro adblocker:
$ (document) .ready (function () {
if (! $ ("# ablockercheck"). je (": viditelný"))
$ ("# ablockermsg"). text ("Prosím deaktivujte adblocker."). show ();
});
„ablockercheck“ je ID, které blokuje adblocker. Když tedy zkontrolujete, zda je viditelný, můžete zjistit, zda je adblocker zapnutý.
|
Nakonec mi žádný z příkladů nevyhovuje, tak jsem napsal svůj vlastní.
Testy (bez podpory filtru Internet Explorer: alfa):
a) Zkontrolujte, zda dokument není skrytý
b) Zkontrolujte, zda má prvek nulovou šířku / výšku / neprůhlednost nebo displej: žádný / viditelnost: skrytý ve vložených stylech
c) Zkontrolujte, zda střed (také proto, že je rychlejší než testování každého pixelu / rohu) prvku není skrytý jiným prvkem (a všemi předky, příklad: overflow: hidden / scroll / jeden prvek nad druhým) nebo hranami obrazovky
d) Zkontrolujte, zda má prvek nulovou šířku / výšku / neprůhlednost nebo displej: žádný / viditelnost: skrytý ve vypočítaných stylech (mezi všemi předky)
Testováno dne
Android 4.4 (Nativní prohlížeč / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (režimy dokumentů Internet Explorer 5-11 + Internet Explorer 8 na virtuální počítač) a Safari (Windows / Mac / iOS).
var is_visible = (funkce () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativní = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funkce uvnitř (dítě, rodič) {
while (dítě) {
if (child === parent) vrací true;
child = child.parentNode;
}
návrat false;
};
návratová funkce (prvek) {
pokud (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'skrytý' ||
elem.style.display == 'žádný' ||
elem.style.opacity === 0
) vrátit false;
var rect = elem.getBoundingClientRect ();
if (relativní) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} else if (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) vrátit false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
návrat true;
}
}) ();
Jak používat:
is_visible (elem) // boolean
|
Musíte zkontrolovat obojí ... Zobrazení i viditelnost:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "skrytý") {
// Prvek není viditelný
} else {
// Prvek je viditelný
}
Pokud zkontrolujeme $ (this) .is (": visible"), jQuery automaticky zkontroluje obě věci.
|
Možná něco takového můžete udělat
$ (document) .ready (function () {
var viditelný =$ ('# tElement'). je (': viditelný');
pokud (viditelné) {
výstraha („viditelná“);
// Kód
}
jiný
{
upozornění („skryté“);
}
});
jméno
|
Jednoduše zkontrolujte viditelnost kontrolou logické hodnoty, například:
if (this.hidden === false) {
// Váš kód
}
Tento kód jsem použil pro každou funkci. Jinak můžete pro kontrolu viditelnosti prvku použít is (': visible').
|
Protože prvky s viditelností: skryté nebo opacita: 0 jsou považovány za viditelné, protože stále zabírají místo v rozložení (jak je popsáno pro jQuery: visible Selector) - můžeme zkontrolovat, zda je prvek opravdu viditelný tímto způsobem:
funkce isElementReallyHidden (el) {
vrátit $ (el) .is (": skrytý") || $ (el) .css ("visibility") == "skrytý" || $ (el) .css ('opacity') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ale co když je CSS prvku následující?
.živel{
pozice: absolutní; vlevo: -9999;
}
Měla by se také zvážit tato odpověď na otázku Přetečení zásobníku Jak zkontrolovat, zda je prvek mimo obrazovku.
|
Lze vytvořit funkci ke kontrole atributů viditelnosti / zobrazení, aby bylo možné měřit, zda je prvek zobrazen v uživatelském rozhraní.
funkce checkUIElementVisible (prvek) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'skrytý')));
}
Pracovní housle
|
Tady je také ternární podmíněný výraz ke kontrole stavu prvku a jeho přepnutí:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle '). show (' pomalý ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} else {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
další
Vysoce aktivní otázka. Získejte 10 reputace, abyste mohli odpovědět na tuto otázku. Požadavek na reputaci pomáhá chránit tuto otázku před spamem a neodpovědností.
Toto není odpověď, kterou hledáte? Přečtěte si další otázky týkající se viditelnosti javascript jquery dom nebo položte vlastní otázku.
Zdroj:
Blogger Plug n Play - Nástroje a widgety jQuery: Jak zjistit, zda je prvek skrytý nebo viditelný pomocí jQuery
|
Lze jednoduše použít skrytý nebo viditelný atribut, například:
$ ('element: hidden')
$ ('element: visible')
Nebo můžete zjednodušit totéž pomocí následujícího.
$ (element) .is (": visible")
|
ebdiv by měl být nastaven na style = "display: none;". Funguje to jak pro zobrazení, tak pro skrytí:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Další odpověď, kterou byste měli vzít v úvahu, je, pokud skrýváte prvek, měli byste použít jQuery, ale místo toho, abyste jej skutečně skryli, odstraníte celý prvek, ale zkopírujete jeho obsah HTML a samotnou značku do proměnné jQuery a vše, co musíte udělat, je otestovat, zda je taková značka na obrazovce, pomocí normální if (! $ ('# thetagname'). length).
|
Při testování prvku proti: skrytému selektoru v jQuery je třeba vzít v úvahu, že absolutně umístěný prvek může být rozpoznán jako skrytý, i když jsou viditelné jeho podřízené prvky.
Na prvním místě se to zdá poněkud protiintuitivní - ačkoli bližší pohled na dokumentaci jQuery poskytuje relevantní informace:
Prvky lze považovat za skryté z několika důvodů: [...] Jejich šířka a výška jsou výslovně nastaveny na 0. [...]
Takže to vlastně dává smysl, pokud jde o krabicový model a vypočítaný styl prvku. I když šířka a výška nejsou nastaveny explicitně na 0, mohou být nastaveny implicitně.
Podívejte se na následující příklad:
console.log ($ ('. foo'). is (': hidden')); // skutečný
console.log ($ ('. bar'). is (': hidden')); // Nepravdivé
.foo {
pozice: absolutní;
vlevo: 10px;
nahoře: 10px;
pozadí: # ff0000;
}
.bar {
pozice: absolutní;
vlevo: 10px;
nahoře: 10px;
šířka: 20px;
výška: 20px;
pozadí: # 0000ff;
}
Aktualizace pro jQuery 3.x:
S jQuery 3 se popsané chování změní! Prvky budou považovány za viditelné, pokud mají pole rozvržení, včetně polí s nulovou šířkou a / nebo výškou.
JSFiddle s jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Stejný kód JavaScript pak bude mít tento výstup:
console.log ($ ('. foo'). is (': hidden')); // Nepravdivé
console.log ($ ('. bar'). is (': hidden'));// Nepravdivé
|
To může fungovat:
expect ($ ("# message_div"). css ("display")). toBe ("none");
|
Příklad:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). délka) {
console.log ('Skryté');
}
});
|
Chcete-li zkontrolovat, zda to není viditelné, používám!:
if (! $ ('# book'). is (': visible')) {
upozornění („# kniha není viditelná“)
}
Nebo následující je také sam, uložení selektoru jQuery do proměnné, aby měl lepší výkon, když to potřebujete vícekrát:
var $ book = $ ('# kniha')
if (! $ book.is (': visible')) {
upozornění („# kniha není viditelná“)
}
|
Použijte přepínání tříd, nikoli úpravy stylů. . .
Používání tříd určených pro „skrývání“ prvků je snadné a také jednou z nejúčinnějších metod. Přepnutí třídy „skrytá“ se stylem zobrazení „žádný“ bude rychlejší než přímá úprava tohoto stylu. Vysvětlil jsem některé z toho docela důkladně v otázce přetečení zásobníku Otočení dvou prvků viditelných / skrytých ve stejné div.
Osvědčené postupy a optimalizace JavaScriptu
Zde je opravdu poučné video z Google Tech Talk od front-end inženýra Google Nicholase Zakase:
Zrychlete svůj Javascript (YouTube)
|
Je aktivován příklad použití viditelné kontroly pro adblocker:
$ (document) .ready (function () {
if (! $ ("# ablockercheck"). je (": viditelný"))
$ ("# ablockermsg"). text ("Prosím deaktivujte adblocker."). show ();
});
„ablockercheck“ je ID, které blokuje adblocker. Když tedy zkontrolujete, zda je viditelný, můžete zjistit, zda je adblocker zapnutý.
|
Nakonec mi žádný z příkladů nevyhovuje, tak jsem napsal svůj vlastní.
Testy (bez podpory filtru Internet Explorer: alfa):
a) Zkontrolujte, zda dokument není skrytý
b) Zkontrolujte, zda má prvek nulovou šířku / výšku / neprůhlednost nebo displej: žádný / viditelnost: skrytý ve vložených stylech
c) Zkontrolujte, zda střed (také proto, že je rychlejší než testování každého pixelu / rohu) prvku není skrytý jiným prvkem (a všemi předky, příklad: overflow: hidden / scroll / jeden prvek nad druhým) nebo hranami obrazovky
d) Zkontrolujte, zda má prvek nulovou šířku / výšku / neprůhlednost nebo displej: žádný / viditelnost: skrytý ve vypočítaných stylech (mezi všemi předky)
Testováno dne
Android 4.4 (Nativní prohlížeč / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (režimy dokumentů Internet Explorer 5-11 + Internet Explorer 8 na virtuální počítač) a Safari (Windows / Mac / iOS).
var is_visible = (funkce () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativní = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funkce uvnitř (dítě, rodič) {
while (dítě) {
if (child === parent) vrací true;
child = child.parentNode;
}
návrat false;
};
návratová funkce (prvek) {
pokud (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'skrytý' ||
elem.style.display == 'žádný' ||
elem.style.opacity === 0
) vrátit false;
var rect = elem.getBoundingClientRect ();
if (relativní) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} else if (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) vrátit false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
návrat true;
}
}) ();
Jak používat:
is_visible (elem) // boolean
|
Musíte zkontrolovat obojí ... Zobrazení i viditelnost:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "skrytý") {
// Prvek není viditelný
} else {
// Prvek je viditelný
}
Pokud zkontrolujeme $ (this) .is (": visible"), jQuery automaticky zkontroluje obě věci.
|
Možná něco takového můžete udělat
$ (document) .ready (function () {
var viditelný =$ ('# tElement'). je (': viditelný');
pokud (viditelné) {
výstraha („viditelná“);
// Kód
}
jiný
{
upozornění („skryté“);
}
});
jméno
|
Jednoduše zkontrolujte viditelnost kontrolou logické hodnoty, například:
if (this.hidden === false) {
// Váš kód
}
Tento kód jsem použil pro každou funkci. Jinak můžete pro kontrolu viditelnosti prvku použít is (': visible').
|
Protože prvky s viditelností: skryté nebo opacita: 0 jsou považovány za viditelné, protože stále zabírají místo v rozložení (jak je popsáno pro jQuery: visible Selector) - můžeme zkontrolovat, zda je prvek opravdu viditelný tímto způsobem:
funkce isElementReallyHidden (el) {
vrátit $ (el) .is (": skrytý") || $ (el) .css ("visibility") == "skrytý" || $ (el) .css ('opacity') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ale co když je CSS prvku následující?
.živel{
pozice: absolutní; vlevo: -9999;
}
Měla by se také zvážit tato odpověď na otázku Přetečení zásobníku Jak zkontrolovat, zda je prvek mimo obrazovku.
|
Lze vytvořit funkci ke kontrole atributů viditelnosti / zobrazení, aby bylo možné měřit, zda je prvek zobrazen v uživatelském rozhraní.
funkce checkUIElementVisible (prvek) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'skrytý')));
}
Pracovní housle
|
Tady je také ternární podmíněný výraz ke kontrole stavu prvku a jeho přepnutí:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle '). show (' pomalý ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} else {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
další
Vysoce aktivní otázka. Získejte 10 reputace, abyste mohli odpovědět na tuto otázku. Požadavek na reputaci pomáhá chránit tuto otázku před spamem a neodpovědností.
Toto není odpověď, kterou hledáte? Přečtěte si další otázky týkající se viditelnosti javascript jquery dom nebo položte vlastní otázku.